<template>
	<div id="app">
		<Head />
		<main>
			<aside><Menu /></aside>
			<div class="admin" style="background-color: rgb(244,244,244);border-color: rgb(84, 92, 100);">
				<router-view to="/backstage/index"></router-view>
			</div>
		</main>

	</div>
</template>

<script>
import Head from './components/head.vue';
import Menu from './components/menu.vue';

export default {
	name: 'App',
	components: {
		Head,
		Menu
	}
}
</script>

<style>
body {
	margin: 0;
	padding: 0;
}

main {
	height: calc(100% - 70px);
	/* background-color: yellowgreen; */
	/* 设置为弹性容器 */
	display: flex;
}

aside {
	width: 220px;
	/* background-color: orange; */
	margin-right: 30px;
	/* border: 1px solid red; */

	/* 设置压缩因子 */
	/* flex-shrink: 1; */
}

#app {
	/* vw 相对单位，是参考视口的宽度  100vw就是一个视口的宽度 */
	width: 100vw;
	/* vh  相对单位，是参考视口的高度，100vh就是一个视口的高度*/
	height: 100vh;
	/* background-color: pink; */
}

.admin {
	margin-left: 40px;
	background: #fff;
	position: fixed;
	border-left: solid 1px #b5cfd9;
	right: 0;
	bottom: 0;
	top: 70px;
	left: 180px;
	padding: 15px;
	padding-right: 0px;
	padding-bottom: 0px;
	/* overflow: auto; */
	border-top: 1px solid #b5cfd9;
	padding-right: 15px;
	z-index: 1000;
}
</style>

